<template>
  <!-- 征信大数据 -->
  <div class="MyCredit">
    <div class="head_brea">
      <el-breadcrumb class="isicons" :separator-icon="ArrowRight">
        <el-breadcrumb-item to="/stuindex">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ SetTaskListName() }}任务列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bg">
      <div class="bg_1">
        <div class="table_headr">
          <span style="width: 80px; text-align: center;padding-left: 30px;">序号</span>
          <span style="width: 500px; text-align: center">任务名称</span>
          <span style="width: 50px; text-align: center">分值</span>
          <span style="width: 50px; text-align: center">{{ taskType == '1' ? '得分' : '' }} </span>
          <span style="width: 300px; text-align: center">操作</span>
        </div>
        <ul class="table_body">
          <li v-for="(time, index) in   taskList  " :key="index">
            <span style="width: 80px; text-align: center">{{ index + 1 }}</span>
            <span style="width: 500px; text-align: center">{{
              time.taskName
            }}</span>
            <span style="width: 50px; text-align: center">{{ time.score }}</span>
            <span style="width: 50px; text-align: center">{{ taskType == '1' ? time.result : '' }} </span>
            <span style="width: 300px; text-align: center">
              <el-button class="btn_bag " @click="OpenTask(time)" :class="{ btn1: time.status == 1 || time.status == 2 }"
                :loading="btnloading">{{ time.status == 1 ? "继续" :
                  "开启" }}</el-button>
              <el-button class="btn_bag" :class="{ btn2: time.status == 1 || time.status == 2 }" @click="RedoTask(time)"
                :loading="btnloading">重做</el-button>
              <el-button class="btn_bag" :class="{ btn3: time.status == 1 }" @click="SubmitTask(time)"
                :loading="btnloading">提交</el-button>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import qs from "qs"
import { onMounted, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { MapLocation, ArrowRight } from "@element-plus/icons-vue";
import { SetTaskListName } from "@/utils/public/method"
import { getBigDataProcessApi, GetUpdateStartTask } from "@/api/stu/bigdataprocessing";
import {
  OpentaskOnOpen,
  OpentaskOnRedo,
  OpentaskOnSubmit
} from "@/api/stu/taskManage";
import { ElMessage, FormInstance, ElMessageBox } from "element-plus";
const [route, router] = [useRoute(), useRouter()];
/* 任务列表 */
const btnloading = ref(false)
const taskList = ref<any>([]);
const SetTaskName = ref<string>("")
const taskType = localStorage.getItem("taskType");
// 获取任务列表
async function GetTaskList() {
  const req = await getBigDataProcessApi({
    pageIndex: 1,
    pageCount: 10,
    planId: "",
    moduleId: JSON.parse(sessionStorage.getItem("moduleId")),
    userId: ""
  });
  if (req.success && req.status === 200) {
    taskList.value = req.data.items;
  } else {
    ElMessage.error(req.msg)
  }

}
async function open(row) {
  const data = qs.stringify({ id: row.taskStateId });
  await GetUpdateStartTask(data);
}


// 开启任务
async function OpenTask(row) {
  const data = qs.stringify({ taskId: row.id });
  // if (row.status !== 1) {
  btnloading.value = true;
  const res = await OpentaskOnOpen(data);
  if (res.success) {
    nextTick(() => {
      router.push({
        path: "/student/data_scene/MapPage",
        query: {
          planId: row.planId,
          taskId: row.id
        }
      });
    })
    btnloading.value = false;
  } else {
    setTimeout(() => { btnloading.value = false; }, 1500)
    ElMessage.error(res.msg)
  }
  // } else {
  //   router.push({
  //     path: "/student/data_scene/MapPage",
  //     query: {
  //       planId: row.planId,
  //       taskId: row.id
  //     }
  //   });
  // }

}
// 重做任务
async function RedoTask(row) {
  if (!row.status) {
    ElMessage.warning("未开启任务")
    return
  }

  ElMessageBox({
    title: '提示', //MessageBox 标题
    closeOnClickModal: false,
    message: '是否确定重做当前任务?', //MessageBox 消息正文内容
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    btnloading.value = true;
    const data = qs.stringify({ taskId: row.id });
    const res = await OpentaskOnRedo(data);
    if (res.success) {
      btnloading.value = false;
      GetTaskList()
      setTimeout(() => {
        router.push({
          path: "/student/data_scene/MapPage",
          query: {
            planId: row.planId,
            taskId: row.id
          }
        });
      }, 500);
      ElMessage({
        type: 'success',
        duration: 500,
        message: res.msg
      })
    } else {
      ElMessage({
        type: 'error',
        duration: 500,
        message: res.msg
      })
      setTimeout(() => { btnloading.value = false; }, 1500)
    }
  }).catch(() => { })
}
// 提交任务
async function SubmitTask(row) {
  if (!row.status) {
    ElMessage.warning("未开启任务")
    return
  }
  btnloading.value = true;
  const data = qs.stringify({ taskId: row.id });
  const res = await OpentaskOnSubmit(data);
  if (res.success) {
    btnloading.value = false;
    ElMessage.success(res.msg)
    GetTaskList()
  } else {
    ElMessage.error(res.msg)
    setTimeout(() => { btnloading.value = false; }, 1500)
  }
}

/* 任务列表 */
onMounted(() => {
  GetTaskList()
})
</script>
<style lang="scss" scoped>
@import url(@/style/breadcrumbIcon.scss);
@import url(@/style/task_list.scss);

:deep(.el-button) {
  background-color: transparent;
  border: none;
}

:deep(.el-button.is-loading:before) {
  background-color: transparent
}

.head_brea {
  width: 80%;
  margin: 0 auto;
}

.MyCredit {
  padding-top: 80px;
  background-color: #f2f5fa;
  height: 100vh;
}

.bg {
  width: 100%;
  height: calc(100% - 35px);
}
</style>
